import PropsType from "prop-types";
import { Button } from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import './SwtichTabs.scss'

const SwitchTabs = ({tabList, value, onChange}) => {
  return (
    <div className="swtichTabs">
      {
        tabList && tabList.length && tabList.map((item, index) => {
          return (
            <Button
              onClick={() => onChange(item.value)}
              className={`swtichTabs-item ${value === item.value ? 'isActive' : ''}`}
              variant={value === item.value ? 'contained' : undefined}
              disableElevation
              key={index}
              startIcon={value === item.value ? <CheckIcon style={{fontSize: '1rem'}}/> : undefined}
            >
              {item.tabName}
            </Button>
          )
        })
      }
    </div>
  )
}

SwitchTabs.propTypes = {
  tabList: PropsType.array.isRequired,
  value: PropsType.any
}

export default SwitchTabs